<style scoped>
.layui-row {
    overflow: hidden;
}

.select-item {
    width: 34.333333%;
    float: right;
}

.layui-row:after,
.layui-row:before {}

.layui-form>>>.layui-form-select {
    z-index: inherit;
}
</style>

<template>
<div class="organization">

    <form class="layui-form ">

        <div class="layui-col-lg4 select-item" style="text-align: right;width: auto">
            <div class="layui-inline" style="width: 180px" id="batching">
                <!-- <select v-model="batch" name="batchGuid" id="batchGuid" lay-filter="college" placeholder="请选择批次" class="layui-input layui-unselect">
                    <option value="">采收中批次</option>
                    <option v-for="item in batchsList" :value="item.guid" :key="item.id">{{item.name}}</option>
                </select> -->
            </div>

            <div class="layui-inline" style="width: 180px" id="batchdone">
                <!-- <select v-model="batch" name="Guid" id="Guid" lay-filter="finsh" placeholder="请选择批次" class="layui-input layui-unselect">
                    <option value="">已完成批次</option>
                    <option v-for="item in batchs" :value="item.guid" :key="item.id">{{item.name}}</option>
                </select> -->
            </div>
            <div class="layui-input-inline" style="width: 140px">
                <input type="text" v-model="paycode" placeholder="输入支付申请编号" class="layui-input">
            </div>
            <div class="layui-input-inline" style="width: 140px">
                <input type="text" id="applydate" placeholder="选择申请日期" class="layui-input">
            </div>
            <div class="layui-inline" style="width: 140px">
                <select id="plantor" placeholder="请选择收款人" class="layui-input" lay-search>
                    <option value="" style="text-align: left;">请选择收款人</option>
                    <option v-for="item in plantors" :value="item.guid" style="text-align: left;" :key="item.id">{{item.realname}}</option>
                </select>
            </div>
            <div class="layui-inline" style="width: 140px">
                <select placeholder="请选择状态" class="layui-input" ref="status">
                    <option value="" style="text-align: left;">请选择状态</option>
                    <option v-for="item in statuses" :value="item.dictkey" style="text-align: left;" :key="item.dictkey">{{item.dicttext}}</option>
                </select>
            </div>
            <button type="button" class="layui-btn sou" @click="search">搜索</button>
        </div>

    </form>
    <table class="layui-table layui-form">

        <thead>
            <tr>
                <th>支付申请编号</th>
                <th>采收主体</th>
                <th>收款人</th>
                <th>车数</th>
                <th>结算金额</th>
                <th>已付金额</th>
                <th>未付金额</th>
                <th>申请时间</th>
                <th>申请人</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr class="id9" v-for="(val, index) in payinfos" :key="index">
                <td>{{val.code}}</td>
                <td>{{val.company}}</td>
                <td>{{val.plantorname}}</td>
                <td>{{val.carnum}}</td>
                <td>{{val.amount}}</td>
                <td>{{val.preamount}}</td>
                <td>{{val.recamount}}</td>
                <td>{{val.createdate}}</td>
                <td>{{val.operatorrealname}}</td>
                <td>{{val.statusname}}</td>
                <td><a href="javascript:;" @click="toAction(val.guid)">查看</a> </td>
            </tr>
        </tbody>
    </table>

    <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage"></Pagination>
    <div style="height: 200px"></div>

</div>
</template>

<script>
    let qs = require('qs');
    import Pagination from '../common/Pagination.vue'
export default {
    name: 'PayinfoList',
    components: {
        Pagination
    },

    props: ['id'],
    data() {
        return {
            guid: this.id,
            organizations: [],
            currentPage: 1,
            totalPage: 0,
            searchName: '',
            //全部的批次,
            batchsAll: [],
            //已完成批次
            batchs: [],
            //采收中批次
            batchsList: [],
            batchGuid: '',
            payinfos: [],
            initStatus: '',
            paycode: '',
            plantors: '',
            Guid: '',
            key: null,
            key1: null,
            batch: undefined,
            batch1: undefined,
            statuses: '',
            falg : false,
            pbguids: []
        }
    },
    updated: function () {
        layui.form.render('select');
        layui.form.render();
    },
    mounted() {
        let that = this;
        layui.use(['form'], function () {
            var form = layui.form,
                layer = layui.layer;
            //that.getBaseInfo();
            //监听数据option
            form.on('select(college)', function (data) {
                var message = $("#batchGuid").val();
                if (message !== null) {
                    that.key = 1
                    that.batch = message
                }
                if (message === "") {
                    that.key = null
                }
            });
            form.on('select(finsh)', function (data) {
                var message1 = $("#Guid").val();
                if (message1 !== null) {
                    that.key1 = 2
                    that.batch = message1
                }
                if (message1 === "") {
                    that.key1 = null
                }
            });

        });
        layui.use('laydate', function () {
            let laydate = layui.laydate;
            laydate.render({
                elem: '#applydate' //指定元素
            });
        });
        this.getPlantors();
        this.getStatus();
        this.getBatchs();
        //状态多选
        // this.initStatusSelect();
    },
    methods: {
        getBatchs(){
            let that = this;
             that.axios({
                method: 'get',
                url: '/harvest/Procurementbatch!findBatchbyFun.action',
                params: {
                    functiontype: 20
                }
            }).then(response => {
                if (response.data.msg == 'success') {
                    that.batchsAll = response.data.batchs;
                    if(that.batchsAll.length != 0){
                         $.each(that.batchsAll, function (index, entity) {
                             if(entity.status == 1){
                                 that.batchsList.push(entity)
                             }else{
                                 that.batchs.push(entity)
                             }
                        });
                         
                        that.falg = true;
                    }
                    that.initbatchingSelect();
                    that.initBatchdoneSelect();
                } else {
                    that.toastText('获取批次数据失败')
                }
            });
        },
        search: function () {
            this.getPageData('search');
        },
        turnPage: function (data) {
            this.currentPage = data;
            this.getPageData();
        },
        getPageData: function (type = '') {
            let that = this;
            that.pbguids = [];
            let postData = {};

            if (type != 'search') {
                postData.page = that.currentPage;
            }

            if (that.batch !== undefined) {
                postData.batchid = that.batch
            } else if (that.batch1 !== undefined) {
                postData.batchid = that.batch1
            }
            postData.stat = this.$refs.status.value;
            //that.batchGuid = postData.batchid
            
            if ($("input[name='batching']").val() != '') {
                that.pbguids.push($("input[name='batching']").val());
            }
            if ($("input[name='batchdone']").val() != '') {
                that.pbguids.push($("input[name='batchdone']").val());
            }
            if(that.pbguids.toString() == "" || that.pbguids.toString() == null){
                var optionAll = that.selectPermisAll(that.batchsAll, "无授权批次!");
                if (optionAll) {
                    postData.pbguids = optionAll;
                }
            }else{
                postData.pbguids = that.pbguids.toString();
            }
            
            postData.paycode = this.paycode;
            postData.applydate = $('#applydate').val();
            postData.plantor = $('#plantor').val();
            if(that.falg){
                let loader = layui.layer.load();

                $.ajax({
                    url: '/harvest/Print!getPayInfo.action',
                    type: "post",
                    data: postData,
                    dataType: "json",
                    success: function (res) {
                        if (res != undefined && res.rows != undefined) {
                            //分页数据赋值
                            that.currentPage = res.indexPage;
                            that.totalPage = res.pageCount;
                            that.payinfos = res.rows;
                        } else {
                            that.alert("系统错误");
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });
            }
           
        },
        getPlantors: function () {
            this.axios({
                method: 'get',
                url: '/harvest/Procurementcontract!getPlanters.action',
                params: {}
            }).then(response => {
                if (response.data.msg == 'success') {
                    this.plantors = response.data.planters;
                } else {
                    this.toastText('获取种植户数据失败')
                }
            });
        },
        getStatus: function () {
            this.$post('/sales/Sellform!findDict.action', qs.stringify({type: 67})).then(response => {
                if (response.statusText == "OK") {
                    this.statuses = response.data;
                } else {
                    this.toastText('获取支付状态数据失败');
                }
            });
        },
        initStatusSelect: function () {
            let statusArr = [{
                    name: '未支付',
                    value: 1
                },
                {
                    name: '已支付',
                    value: 2
                },
                {
                    name: '已删除',
                    value: 0
                }
            ];
            this.initStatus = layui.xmSelect.render({
                el: '#status',
                tips: '请选择状态',
                data: statusArr
            })
        },
        toAction: function (id) {
            this.$parent.gid = id;
            this.$parent.switchPage('FreightorderList');
        },
        getBaseInfo: function (id) {
            this.$post('/harvest/Print!getBaseInfo.action')
                .then(response => {
                    let data = response.data;
                    if (data.msg == 'success') {
                        this.batchs = data.limitBatch;
                        this.batchsList=data.normalBatch
                        this.getPageData();
                    } else {
                        this.toast('获取批次失败！');
                    }
                })
        },
        /**
         * 查询权限内所有选项的数据
         * @param guid  选择框内选项
         * @param entitys 选择框内所有枚举值
         */
        selectPermisAll: function (entitys, description) {
            if (entitys.length == 0) {
                this.toast(description);
                return false;
            }
            // if (guid != '') {
            //     return false;
            // }
            var srguids = [];
            $.each(entitys, function (index, entity) {
                srguids.push(entity.guid)
            });
            return srguids.toString();
        },
        initBatchdoneSelect: function () {
            layui.xmSelect.render({
                el: '#batchdone',
                tips: '请选择已完成批次',
                name: 'batchdone',
                prop: {
                    name: 'name',
                    value: 'guid'
                },
                data: this.batchs
            })
        },
        initbatchingSelect(){
            layui.xmSelect.render({
                el: '#batching',
                tips: '请选择采收中批次',
                name: 'batching',
                prop: {
                    name: 'name',
                    value: 'guid'
                },
                data: this.batchsList
            })
        }
    },
    

}
</script>
